<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
    <title>Document</title>
</head>

<body>

    <ul id="tt" data-options="fit:true">
        <div style="display: none" id="mm" class="easyui-menu" style="width:120px;">
            <div class="add" data-options="iconCls:'icon-add'">添加子类</div>
            <div class="remove" data-options="iconCls:'icon-remove'">移除当前节点</div>
        </div>
        <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
            <form id="ff" method="GET">
                <input id="pid" type="text" name="parentId" style="display: none">
                <input id="tp" type="text" name="type" style="display: none">
                <table cellpadding="5">
                    <tr>
                        <td>需要增加子类名称:</td>
                        <td>
                            <input class="easyui-textbox" type="text" name="text" data-options="required:true"></input>
                        </td>
                    </tr>
                </table>
            </form>
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
            </div>
        </div>
    </ul>
    <input type="button" value="添加根节点" id="addRoot">
    <div id="dd">
        <table id="dg"></table>
    </div>

    <div id="dlg2" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
        <form id="ff2" method="GET">
            <input type="text" name="_id" style="display: none">
            <input type="text" name="deffer" id="deffer" style="display: none"></input>
            <table cellpadding="5">
                <tr>
                    <td>标题:</td>
                    <td>
                        <input class="easyui-textbox" type="text" name="title" data-options="required:true"></input>
                    </td>
                </tr>
                <tr>
                    <td>内容:</td>
                    <td>
                        <input class="easyui-textbox" type="text" name="content" data-options="required:true"></input>
                    </td>
                </tr>
                <tr style="display: none">
                    <td>时间:</td>
                    <td>
                        <input class="easyui-textbox" type="text" name="date" id='date'></input>
                    </td>
                </tr>

            </table>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm2()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm2()" style="width:80px">Clear</a>
        </div>
    </div>
    <div id="commentWindow" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'"
        style="width:90%;height:500px;padding:10px;">
        <div id="dlg-c" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
            <form id="ff-c" method="get">
                <input type="text" name="_id" style="display: none"> 评论分类:
                <input type="text" name="newsid" id="newsid" style="display: none"></input>
                <table cellpadding="5">
                    <tr>
                        <td>用户名:</td>
                        <td>
                            <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
                        </td>
                    </tr>
                    <tr>
                        <td>内容:</td>
                        <td>
                            <input class="easyui-textbox" type="text" name="content" data-options="required:true"></input>
                        </td>
                    </tr>
                    <tr style="display: none">
                        <td>时间:</td>
                        <td>
                            <input class="easyui-textbox" type="text" name="date" id='date'></input>
                        </td>
                    </tr>

                </table>
            </form>
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm3()" style="width:80px">Submit</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm3()" style="width:80px">Clear</a>
            </div>
        </div>
        <table id="dg-c" ></table>
    </div>
</body>
<script>
    var urlsingle = 'http://localhost:3000';
    function deleteRowc(id) {
        $.messager.confirm("删除确认", "你确认删除吗", function (r) {
            if (r) {
                $.ajax({
                    url: `${urlsingle}/comment/data/${id}`,
                    type: "delete",
                }).done(res => {
                    $("#dg-c").datagrid('reload');
                })
            }
        })

    };

    function editRowc(id) {
        $.ajax({
            url: `${urlsingle}/comment/data/${id}`,
            type: "put",
        }).done(res => {
            $('#ff-c').form('load', res);
            $("#dlg-c").dialog('open');
        })
    };

    function submitForm3() {
        $('#ff-c').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $("#ff-c").serializeJSON();
                   formData.date = new Date().toLocaleString().toString();
                    if (formData._id.trim().length > 0) {
                        $.ajax({
                            url: `${urlsingle}/comment/data/${formData._id}`,
                            type: "put",
                            data: formData
                        }).done(res => {
                            $("#dg-c").datagrid('reload');
                            $("#dlg-c").dialog('close');

                        })
                    } else {
                        delete formData._id;
                        $.ajax({
                            url: `${urlsingle}/comment/data`,
                            type: "post",
                            data: formData
                        }).done(res => {
                            $("#dg-c").datagrid('reload');
                            $("#dlg-c").dialog('close');

                        })
                    }
                } else {
                    alert("请填写");
                };
            }
        });
    }

    function clearForm3() {
        $('#ff-c').form('clear');
    }
    var IsCheckFlag = true;
    var receivenewsid = null;
    $('#dg-c').datagrid({
        url: `${urlsingle}/comment/list/all`,
        pagination: true,
        onClickCell: function (rowIndex, field, value) {
            IsCheckFlag = false;
        },
        onSelect: function (rowIndex, rowData) {
            if (!IsCheckFlag) {
                IsCheckFlag = true;
                $("#dg-c").datagrid("unselectRow", rowIndex);
            }
        },
        onUnselect: function (rowIndex, rowData) {
            if (!IsCheckFlag) {
                IsCheckFlag = true;
                $("#dg-c").datagrid("selectRow", rowIndex);
            }
        },
        columns: [
            [{
                    field: 'ck',
                    checkbox: true
                }, {
                    field: 'name',
                    title: '用户名',
                    width: 80
                },
                {
                    field: 'content',
                    title: '评论内容',
                    width: 80
                },
                {
                    field: 'date',
                    title: '时间',
                    width: 150,

                },
                {
                    field: '_id',
                    title: '操作',
                    width: 80,
                    formatter: function (value, row, index) {
                        return `<a href='javascript:void(0)' onclick="deleteRowc('${value}')">删除</a>&nbsp;<a href='javascript:void(0)' onclick="editRowc('${value}')">修改</a>`;
                    },

                }
            ]
        ],
        toolbar: [{
            text: '添加新内容',
            iconCls: 'icon-add',
            handler: function () {

                clearForm3();
                $("#newsid").val(receivenewsid);
                $("#dlg-c").dialog('open');

            }
        }, {
            text: '删除选中行',
            iconCls: 'icon-remove',
            handler: function () {
                $.messager.confirm("删除确认", "你确认删除吗", function (r) {
                    if (r) {
                        var rowarry = $('#dg-c').datagrid('getSelections');
                        var deldata = [];
                        for (var i = 0; i < rowarry.length; i++) {
                            deldata.push(rowarry[i]["_id"]);
                        }
                        $.ajax({
                            url: `${urlsingle}/comment/data/${deldata}`,
                            type: "delete",
                            traditional: true
                        }).done(res => {
                            $("#dg-c").datagrid('reload');
                        });
                    }
                })
            }
        }]
    });




    //---------------------------------------------------------------------------------------------------------











    function deleteRow(id) {
        $.messager.confirm("删除确认", "你确认删除吗", function (r) {
            if (r) {
                $.ajax({
                    url: `${urlsingle}/newscontent/data/${id}`,
                    type: "delete",
                }).done(res => {
                    $("#dg").datagrid('reload');
                })
            }
        })
    };

    function editRow(id) {
        $.ajax({
            url: `${urlsingle}/newscontent/data/${id}`,
            type: "put",
        }).done(res => {
            $('#ff2').form('load', res);
            $("#dlg2").dialog('open');
        })
    };

    function submitForm2() {
        $('#ff2').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {

                    var formData = $("#ff2").serializeJSON();
                    formData.date = new Date().toLocaleString().toString();
                    if (formData._id.trim().length > 0) {
                        $.ajax({
                            url: `${urlsingle}/newscontent/data/${formData._id}`,
                            type: "put",
                            data: formData
                        }).done(res => {
                            $("#dg").datagrid('reload');
                            $("#dlg2").dialog('close');

                        })
                    } else {
                        delete formData._id;
                        $.ajax({
                            url: `${urlsingle}/newscontent/data`,
                            type: "post",
                            data: formData
                        }).done(res => {
                            $("#dg").datagrid('reload');
                            $("#dlg2").dialog('close');
                        })
                    }
                } else {
                    alert("请填写");
                };
            }
        });
    }

    function clearForm2() {
        $('#ff2').form('clear');
    }
    var nodeInfo = null;
    $('#tt').tree({
        url: `${urlsingle}/news/list`,
        method: "post",
        onContextMenu: function (e, node) {
            nodeInfo = node;
            e.preventDefault();
            $('#tt').tree('select', node.target);
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        },
        onDblClick: function (node) {
            $('#dd').dialog({
                title: node.text,
                width: 830,
                height: 400,
                closed: false,
                cache: false,

            });

            var IsCheckFlag = true;
            $('#dg').datagrid({
                url: `${urlsingle}/newscontent/list/${node._id}`,
                pagination: true,
                onClickCell: function (rowIndex, field, value) {
                    IsCheckFlag = false;
                },
                onSelect: function (rowIndex, rowData) {
                    if (!IsCheckFlag) {
                        IsCheckFlag = true;
                        $("#dg").datagrid("unselectRow", rowIndex);
                    }
                },
                onUnselect: function (rowIndex, rowData) {
                    if (!IsCheckFlag) {
                        IsCheckFlag = true;
                        $("#dg").datagrid("selectRow", rowIndex);
                    }
                },
                columns: [
                    [{
                            field: 'ck',
                            checkbox: true
                        }, {
                            field: 'date',
                            title: '日期',
                            width: 100,
                            halign: 'center'
                        }, {
                            field: 'title',
                            title: '标题',
                            width: 150,
                            halign: 'center'
                        },
                        {
                            field: 'content',
                            title: '内容',
                            width: 400,
                            halign: 'center'

                        },
                        {
                            field: '_id',
                            title: '操作',
                            width: 135,
                            halign: 'center',
                            formatter: function (value, row, index) {
                                return `<a href='javascript:void(0)' onclick="deleteRow('${value}')">删除</a>&nbsp;<a href='javascript:void(0)' onclick="editRow('${value}')">修改</a>&nbsp;<a href='javascript:void(0)' onclick="showComment('${value}')">查看评论</a>`;
                            },
                        }
                    ]
                ],
                toolbar: [{
                    text: '添加新内容',
                    iconCls: 'icon-add',
                    handler: function () {
                        clearForm2();
                        $("#deffer").val(node._id);
                        $("#dlg2").dialog('open');
                    }
                }, {
                    text: '删除选中行',
                    iconCls: 'icon-remove',
                    handler: function () {
                        $.messager.confirm("删除确认", "你确认删除吗", function (r) {
                            if (r) {
                                var rowarry = $('#dg').datagrid('getSelections');
                                var deldata = [];
                                for (var i = 0; i < rowarry.length; i++) {
                                    deldata.push(rowarry[i]["_id"]);
                                }
                                $.ajax({
                                    url: `${urlsingle}/newscontent/data/${deldata}`,
                                    type: "delete",
                                    traditional: true
                                }).done(res => {
                                    $("#dg").datagrid('reload');
                                });
                            }
                        })
                    }
                }]
            });



        }
    });

    function showComment(value) {
        receivenewsid = value;
        $("#commentWindow").window('open');
        $.ajax({
            url: `${urlsingle}/comment/list/${value}`,
            type: "post",
        }).done(res => {
            $('#dg-c').datagrid('loadData', res);
        });
    }













    $('.add').on("click", function () {
        $("#tp").val(nodeInfo.type);
        $("#pid").val(nodeInfo._id);
        $("#dlg").dialog('open');
    });
    $('.remove').on("click", function () {
        $.messager.confirm("删除确认", "你确认删除吗", function (r) {
            if (r) {
                $.ajax({
                    url: `${urlsingle}/news/data/${nodeInfo._id}`,
                    type: "delete",
                }).done(res => {
                    $('#tt').tree('reload');

                })
            }
        })

    })

    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $("#ff").serializeJSON();
                    if (formData.parentId == "") {
                        delete formData.parentId
                    }
                    $.ajax({
                        url: `${urlsingle}/news/data`,
                        type: "post",
                        data: formData
                    }).done(res => {
                        $('#tt').tree('reload');
                        $("#dlg").dialog('close');
                        clearForm();
                    })
                } else {
                    alert("请填写");
                };
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }
    $("#addRoot").on("click", () => {
        clearForm();
        $("#tp").val(1);
        $("#dlg").dialog('open');
    })
</script>

</html>